<template>
	<view>
		<!-- 个人信息 -->
		<view class="info-section">
			<view class="section-title">请完善你的个人信息</view>

			<!-- 			<view class="df-ac">
				<text>输入方式</text>
				<view style="width: 500rpx">
					<u-radio-group v-model="selectedValue" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8rpx'}"
							v-for="(item, index) in [{name:'上传身份证',type:1},{name:'手动输入',type:2}]" :key="index"
							:label="item.name" :name="item.type" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view> -->

			<view>
				<view class="df-ac">
					<text>姓名</text>
					<view style="width: 500rpx">
						<u--input border="none" @input="validateName" v-model="formData.realName" placeholder="请输入姓名"
							class="input-item" />
						<text v-if="nameError" class="error-text">{{ nameError }}</text>
					</view>
				</view>
				<view class="df-ac">
					<text>身份证</text>
					<view style="width: 500rpx">
						<u--input border="none" @input="validateIdCard" v-model="formData.idCardNo"
							placeholder="请输入身份证号码" class="input-item" />
						<text v-if="idCardError" class="error-text">{{ idCardError }}</text>
					</view>
				</view>
			</view>

			<view style="border-bottom: 2px solid #eee" />

			<view class="id-upload">
				<view>上传身份证正反面<span style="color: red;">(必填)</span></view>
				<view class="upload-item">
					<view class="">
						<text class="upload-label"><span>*</span>头像面</text>
						<text v-if="!formData.idCardJust" class="error-text">点击上传您的身份证头像面</text>
					</view>
					<view class="">
						<u-upload @afterRead="afterRead" name="1" multiple :maxCount="1">
							<template>
								<image
									:src="formData.idCardJust ? path + formData.idCardJust : '/static/mine/Framezx.png'"
									style="width: 169.39px; height: 92.83px"></image>
							</template>
						</u-upload>
					</view>
				</view>
				<view class="upload-item">
					<view class="">
						<text class="upload-label"><span>*</span>国徽面</text>
						<text v-if="!formData.idCardAgainst" class="error-text">点击上传您的身份证国徽面</text>
					</view>
					<view class="">
						<u-upload @afterRead="afterRead" name="2" multiple :maxCount="1">
							<template>
								<image
									:src="formData.idCardAgainst ? path + formData.idCardAgainst : '/static/mine/Framefx.png'"
									style="width: 169.39px; height: 92.83px"></image>
							</template>
						</u-upload>
						<!--       <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
		                        :maxCount="1"></u-upload> -->
					</view>
				</view>
			</view>

			<view class="id-upload" style="margin-bottom: 30vh">
				<view>其他证件上传（学生请上传学生信息）</view>
				<view style="color: red;font-size: 20rpx;">上传学生证(学校名称及姓名等信息需齐全)、驾驶证等可证明身份信息的证件</view>
				<view class="upload-item">
					<view class="">
						<text class="upload-label">其他</text>
						<text class="upload-span">请点击上传其他证件</text>
					</view>
					<view class="">
						<u-upload @afterRead="afterRead" name="3" multiple :maxCount="1">
							<template>
								<image
									:src="formData.idCardRest ? path + formData.idCardRest : '/static/mine/Framezx.png'"
									style="width: 169.39px; height: 92.83px"></image>
							</template>
						</u-upload>
					</view>
				</view>
			</view>


			<button class="get-bottom-btn" @click="getBtn()">提交</button>
		</view>

	</view>
</template>

<script>
	import main from '@/api/main';
	import api from '@/api/index.js';

	export default {
		data() {
			return {
				baseUrl: api.getPathApi(),
				path: api.getPath(),
				formData: {
					realName: '',
					idCardNo: '',
					idCardJust: '', //身份证正面图片
					idCardAgainst: '', //身份证反面图片
					idCardRest: '' //其他证件
				},
				selectedValue: 1, // 默认不选中任何选项
			};
		},
		computed: {

		},
		methods: {
			//完善用户信息
			async addRz() {
				const res = await main.addRz({
					realName: this.formData.realName,
					idCardNo: this.formData.idCardNo,
					idCardJust: this.formData.idCardJust,
					idCardAgainst: this.formData.idCardAgainst,
					idCardRest: this.formData.idCardRest
				});
				uni.navigateBack()
			},
			async getBtn() {
				console.log(this.formData);
				if (this.formData.idCardJust && this.formData.idCardAgainst) {
					await this.addRz();
				} else {
					uni.showToast({
						title: '身份证正反面为必填信息',
						icon: 'none', // 可选 success/loading/none
						duration: 2000 // 持续时间，单位ms
					})
					return
				}
			},
			groupChange(value) {},
			radioChange(value) {
				this.selectedValue = value;
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			//验证
			// 姓名验证（2-4个中文字符）
			validateName() {
				const value = this.formData.realName.trim();
				const regex = /^[\u4e00-\u9fa5]{2,4}$/;

				if (!value) {
					this.nameError = '姓名不能为空';
				} else if (!regex.test(value)) {
					this.nameError = '请输入2-4个中文字符';
				} else {
					this.nameError = '';
				}
			},
			validateIdCard() {
				const value = this.formData.idCardNo.trim();
				if (!value) {
					this.idCardError = '身份证不能为空';
				} else if (!idCardValidate(value)) {
					this.idCardError = '身份证输入有误，请重新输入';
				} else {
					this.idCardError = '';
				}
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = event.file[0];
				this.isCard = event.name;
				await this.uploadFilePromise(lists.url);
			},
			uploadFilePromise(url) {
				let token = uni.getStorageSync('token');
				const _this = this;
				return new Promise((resolve, reject) => {
					// 'content-Type': 'application/json',
					uni.uploadFile({
						header: {
							authorization: 'Bearer ' + token
						},
						url: _this.baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data);
							if (_this.isCard == 1) {
								_this.formData.idCardJust = data.fileName;
							} else if (_this.isCard == 2) {
								_this.formData.idCardAgainst = data.fileName;
							} else if (_this.isCard == 3) {
								_this.formData.idCardRest = data.fileName;
							}
							reject(0);
						}
					});
				});
			},
		}

	}
</script>

<style lang="less" scoped>
	.error-text {
		color: #ff4545;
		font-size: 24rpx;
		margin-top: 10rpx;
	}


	.get-bottom-btn {
		width: 350rpx;
		background-color: #4989ff;
		border-radius: 100rpx;
		color: #fff;
		position: fixed;
		bottom: 70rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.info-section {
		background: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 10rpx;

		.df-ac {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.input-item {
			margin-bottom: 30rpx;
		}

		.section-title {
			font-size: 34rpx;
			color: #333;
			margin-bottom: 30rpx;
		}

		.id-upload {
			margin: 30rpx 0 60rpx 0;
			display: flex;
			flex-direction: column;
			gap: 30rpx;

			.upload-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.upload-label {
				display: block;
				color: #666;

				span {
					color: red;
				}
			}

			.upload-span {
				color: #a6a6a6;
				font-size: 23rpx;
			}
		}
	}
</style>